<!--
 * @Description: 
 * @Author: ggggxc
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-07 15:28:17
-->
<!-- 培养方案 -->
<template>
  <div class="train">
  <!-- 头部 -->
  <Header></Header>
  <!-- /头部 -->

  <!-- 体部 -->
  <!-- 页面加载状态 -->
  <div class="content" v-loading="loading">
    <div class="wrapper">
      
          <img src="./../assets/listbanner.png" alt="">
        
          <div class="ban_work">培养工作</div>
      
         <div class="page_title">{{category.name}}</div>
        <div class="inner_content">
          <!-- 左侧 -->
          <div class="rank"> 
            <!-- <div class="title">热门</div> -->
             <ul  class="rank_articles" v-for="c in categories" :key="c.id">
               <li v-for="b in c.children" 
                @click="toListHandler(b)"
                :key="b.id">{{b.name}}</li>
              <!-- <li class="cul">培养通知</li>
              <li class="rule">相关规定</li>
              <li class="roll">学籍</li>
              <li class="project">培养方案</li>
              <li class="teach">教学</li>
              <li class="constru">课程建设</li>
              <li class="new">创新项目</li>
              <li class="base">实践基地</li> -->

              
              <!-- <li class="cursor"><a href="http://localhost:3000/#/apply" class="li_a">培养通知</a></li>
              <li class="cursor"><a href="http://localhost:3000/#/list?id=18&name=%E7%9B%B8%E5%85%B3%E8%A7%84%E5%AE%9A&description&no=2&parentId=6" class="li_a">相关规定</a></li>
              <li class="cursor"><a href="" class="li_a">学籍</a></li>
              <li class="cursor"><a href="" class="li_a">培养方案</a></li>
              <li class="cursor"><a href="http://localhost:3000/#/list?id=21&name=%E6%95%99%E5%AD%A6&description&no=5&parentId=6" class="li_a">教学</a></li>
              <li class="cursor"><a href="" class="li_a">课程建设</a></li>
              <li class="cursor"><a href="" class="li_a">创新项目</a></li> -->

            </ul>
          </div>
          <!-- /左侧 -->
           <!-- <div class="articles">
            <div class="position">
            <span>{{category.name}}</span>
            <span>
              当前位置：首页->{{category.name}}
            </span>
            </div><hr> -->

          <!-- 右侧 --> 
          <div class="articles">
            <!-- 文章列表 -->
            <ul v-if="articleData.total > 0">
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData.list" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
            <div v-else style="text-align:center;color:red;padding:2em">
              暂无数据
            </div>
            <!-- /文章列表 -->
            <!-- 分页 -->
            <div class="page">
               <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total">
              </el-pagination>
            </div>
            <!-- /分页 -->
          </div>
          <!-- /右侧 -->

          
        </div>
        <!-- 左侧内容 -->
        <!-- 右侧推荐 -->
      </div>
  </div>

  <!-- /体部 -->

  <!-- 底部 -->
  <Footer></Footer>
  <!-- /底部 -->


  </div>

</template>
<script>
import Header from './components/Header'
import Footer from './components/Footer'
import { get } from '../utils/request'
export default {
  components:{
    Header,Footer
  },
  data(){
    return {
      loading:false,
      category:{},
      categories:[],
      param:{
        page:1,
        pageSize:5
      },
      articleData:{
        list:[]
      }
    }
  },
  watch:{
    '$route.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  created(){
    // 获取参数
    this.category = this.$route.query;
    this.loadArticles();
    this.loadCategories();
  },
  methods:{
    toArticleHandler(id){
      this.$router.push({path:'/ApplyQuery',query:{id}})
    },
    toListHandler(category){
      // 跳转
      this.$router.push({
        path:'/ApplyQuery',
        // 查询字符串
        query:category
      })
    },
     // 加载栏目信息
    loadCategories(){
      // let url = '/index/category/findAll'
      let url = "/index/category/findCategoryTree"
      get(url).then(resp => {
       
      this.categories = resp.data;
        // console.log(this.categories)   
      })
    },
    pageChangeHandler(page){
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles(){
      this.loading = true;
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      }).finally(()=> {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 变量
$color_primary:#028b39;
.train {
  .content {
    background-color: #ecf6f2;
    padding: 1em 0;

    .page_title {
      padding:.5em 0;
      font-size: 18px;
      font-weight: bold;
      color: $color_primary;
    }
    .out_ban {
       img {
        height: 100%;
        width: 100%;
        border-bottom: 8px solid #8c6301;
       }
      
      
    }
    .ban_work {
        // position: absolute;
        left: 0;
        bottom: 95px;
        width: 235px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #fff;
        background: #297470;
        font-size: 20px;
      }
    
    .inner_content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        border-radius: 5px;
        padding: 1em .5em;
        min-height: 500px;
      }
      .articles{
        flex: 1;
        margin-right: 1em;
        padding-left: 4em;
        
        ul > li.article {
          padding: .5em 0;
          border-bottom: 1px solid #ededed;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
          }
        }
        .page {
          padding:.5em 0;
          text-align: center;
          
        }
      }
      .rank {
        flex-basis: 200px;
        position: relative;
        overflow: hidden;
        
        ul li {
          width: 100%;
          line-height: 60px;
          display: block;
          font-size: 16px;
          cursor: pointer;
          border-bottom: 1px solid #9e9e9e;
          text-align: center;
        }
        // ul li{
          
        //   border: 1px solid transparent;
        //   display: block;

        //   cursor: pointer;
        // }
        .rank_articles{
          text-align: center;
          
        }
        
        .title {
          position: absolute;
          left: 0;
          top: -1em;
          background-color: #ff7800;
          color:#fff;
          width: 4em;
          line-height: 1.6em;
          font-size: 18px;
          text-align: center;
        }
      }
      
    }
  }
}
</style>